<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta content="telephone=no" name="format-detection" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<!--360自动切换极速-->
	<meta name="apple-mobile-web-app-title" content="DAN潜水" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="shortcut icon" href="${ctxPath}/image/favicon.ico"/>
	<!--阻止iphone识别为电话-->
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/global.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/index.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/libs/datepicker/css/bootstrap-datepicker3.min.css" />

	<style>
		.dan-blank{
			text-align: center;
		}
		.dan-blank img{
			width: 120px;
			height: 120px;
		}
		.dan-blank div{
			font-size: 14px;
			margin-top: 30px;
		}
		.dan-datepicker{
			display: inline-block;
			width: 150px;
			height: 26px;
			background: #FFFFFF;
			border: 1px solid #CCCCCC;
			border-radius: 4px;
			padding-left: 10px;
		}
		.city-list{
			display: inline-block;
			width: calc(100% - 100px);
		}
		.city-label{
			display: inline-block;
			vertical-align: top;
			position: relative;
			top: 5px;
		}
		.city-item{
			margin-bottom: 0 !important;
		}
		.city-list span{
			margin-bottom: 4px;
		}
	</style>
	<title>DAN潜水</title>
</head>

<body>
	<div class="container">
		@include("/include/header.html"){}
		
		<div class="ac-part" style="margin:20px 0">
			<div class="ac-filter">
				<h3 class="title">活动大厅</h3>
				<div class="item">
					<label for="">时间段：</label>
					<span class="tag ${getUrlQuery(request,'tp') == 'all' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'tp','all')}'" style="cursor:pointer">全部</span>
					<span class="tag ${getUrlQuery(request,'tp') == '1' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'tp','1')}'" style="cursor:pointer">今天</span>
					<span class="tag ${getUrlQuery(request,'tp') == '2' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'tp','2')}'" style="cursor:pointer">明天</span>
					<span class="tag ${getUrlQuery(request,'tp') == '3' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'tp','3')}'" style="cursor:pointer">本周</span>
					<span class="tag ${getUrlQuery(request,'tp') == '4' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'tp','4')}'" style="cursor:pointer">本月</span>
					<span class="span-block">

						<input type="text" class="dan-datepicker datepicker"
								data-date-format="yyyy-mm-dd"
								placeholder="开始日期"
								name="tpBegin" value="${tpBegin!}" id="date_begin">
						到
						<input type="text" class="dan-datepicker datepicker"
								data-date-format="yyyy-mm-dd"
								placeholder="结束日期"
								name="tpEnd" value="${tpEnd!}" id="date_end">
					</span>
				</div>
				<div class="item city-item">
					<label for="" class="city-label">城市：</label>
					<div class="city-list">
						<span class="tag ${getUrlQuery(request,'cp') == 'all' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'cp','all')}'" style="cursor:pointer">全部</span>
						@ for(hotCity in hotCityList){
							<span class="tag ${getUrlQuery(request,'cp') == hotCity.regionId+'' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'cp',hotCity.regionId!)}'" style="cursor:pointer">${hotCity.name!}</span>
						@ }
					</div>
				</div>
				<div class="item">
					<label for="">状态：</label>
					<span class="tag ${getUrlQuery(request,'sp') == 'all' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'sp','all')}'" style="cursor:pointer">全部</span>
					@ for(status in statusDictDataList){
						<span class="tag ${getUrlQuery(request,'sp') == status.dictValue ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'sp',status.dictValue)}'" style="cursor:pointer">${status.dictLabel!}</span>
					@ }
				</div>
				<div class="item">
					<label for="">报名类型：</label>
					<span class="tag ${getUrlQuery(request,'pp') == 'all' ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'pp','all')}'" style="cursor:pointer">全部</span>
					@ for(permission in permissionDictDataList){
					<span class="tag ${getUrlQuery(request,'pp') == permission.dictValue ? 'active' : ''}" onclick="javascript:window.location.href='${getWebUrl(request,'pp',permission.dictValue)}'" style="cursor:pointer">${permission.dictLabel!}</span>
					@ }
				</div>
			</div>
		</div>
		@ if(activityPage.total == 0){
		<div class="dan-blank">
			<img src="${ctxPath}/image/blank.png" alt="">
			<div>暂无数据</div>
		</div>
		@}else{
		<!-- 活动列表 -->
		<div class="activity mb-20">
			<!-- 不要删除 -->
			<!-- <h3 class="dan-tit">最新活动</h3> -->
			<div class="row">
				@ for(activity in activityPage.list!){
				<div class="item col-lg-3 col-md-6">
					<img src="${activity.logoUrl!(ctxPath+'/image/blank/def_pic_s.png')}" alt="" class="cover" style="cursor:pointer" onclick="javascript:window.location.href='${ctxPath}/activity/detail/${activity.id}'">
					<div class="content">
						<div class="date">${strutil.formatDate(activity.createTime!, 'yyyy-MM-dd HH:mm:ss')}</div>
						<div class="des dot-line-2" style="cursor:pointer" onclick="javascript:window.location.href='${ctxPath}/activity/detail/${activity.id}'">${activity.name!}</div>
						<div class="location">${activity.city.name!'-'}丨${activity.pvNum!0}次浏览
							<span class="status">${activity.statusDictLabel!}</span>
						</div>
					</div>
				</div>
				@ }
			</div>
			<nav aria-label="" class="dan-pagination">
				<ul class="pagination">

					@if(activityPage.isFirstPage){
					<li class="disabled">
						<a href="#" aria-label="Previous">
							<span aria-hidden="true"><</span>
						</a>
					</li>
					@ }else{
					<li>
						<a href="${getWebUrl(request,'pg',activityPage.prePage!1)}" aria-label="Previous">
							<span aria-hidden="true"><</span>
						</a>
					</li>
					@ }
					@for (num in activityPage.navigatepageNums!){
					<li ${activityPage.pageNum == num ? 'class="active"' : ''}>
						<a href="${getWebUrl(request,'pg',num)}">${num}</a>
					</li>
					@}
					@if(activityPage.isLastPage){
					<li class="disabled" >
						<a href="#" aria-label="Next">
							<span aria-hidden="true">></span>
						</a>
					</li>
					@}else{
					<li>
						<a href="${getWebUrl(request,'pg',activityPage.nextPage!1)}" aria-label="Next">
							<span aria-hidden="true">></span>
						</a>
					</li>
					@}
				</ul>
			</nav>
			<!-- 不要删除 -->
			<!-- <div class="more">
				<button class="btn btn-danger-outline">更多活动></button>
			</div> -->
		</div>
		@}
		@include("/include/footer.html"){}
	</div>

	<script src="${ctxPath}/js/swiper.min.js"></script>
	<script src="${ctxPath}/libs/datepicker/js/bootstrap-datepicker.min.js"></script>
	<script src="${ctxPath}/libs/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<script>
		function DatePicker(beginSelector,endSelector){
			// 仅选择日期
			$(beginSelector).datepicker(
				{
					language:  "zh-CN",
					autoclose: true,
					startView: 0,
					format: "yyyy-mm-dd",
					clearBtn:true,
					todayBtn:false,
				}).on('changeDate', function(ev){
					if(ev.date){
						$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
					}else{
						$(endSelector).datepicker('setStartDate',null);
					}
					var tpBegin = $("#date_begin").val();
					var tpEnd = $("#date_end").val();
					if(tpBegin != '' && tpEnd != ''){
						var d1 = new Date(tpBegin.replace(/\-/g, "\/"));
						var d2 = new Date(tpEnd.replace(/\-/g, "\/"));
						if(d1 >=d2)
						{
							alert("开始时间不能大于结束时间！");
							return false;
						}else{
							window.location.href = "${ctxPath}/activity/list?"+getUrlArgStr(escape(tpBegin+"|"+tpEnd));
						}
					}
			})

			$(endSelector).datepicker(
			{
				language:  "zh-CN",
				autoclose: true,
				startView:0,
				format: "yyyy-mm-dd",
				clearBtn:true,
				todayBtn:false,
			}).on('changeDate', function(ev){
				if(ev.date){
					$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
				}else{
					$(beginSelector).datepicker('setEndDate',new Date());
				}
				var tpBegin = $("#date_begin").val();
				var tpEnd = $("#date_end").val();
				if(tpBegin != '' && tpEnd != ''){
					var d1 = new Date(tpBegin.replace(/\-/g, "\/"));
					var d2 = new Date(tpEnd.replace(/\-/g, "\/"));
					if(d1 >=d2)
					{
						alert("开始时间不能大于结束时间！");
						return false;
					}else{
						window.location.href = "${ctxPath}/activity/list?"+getUrlArgStr(escape(tpBegin+"|"+tpEnd));
					}
				}
			})
		}
		DatePicker("#date_begin","#date_end");

		function getUrlArgStr(tpvalue){
			var q=location.search.substr(1);
			var qs=q.split('&');
			var argStr='';
			if(qs){
				var hasTpParam = false;
				for(var i=0;i<qs.length;i++){
					var querykey = qs[i].substring(0,qs[i].indexOf('='));
					var queryvalue = qs[i].substring(qs[i].indexOf('=')+1);
					if(querykey == "tp"){
						hasTpParam = true;
						queryvalue = tpvalue;
					}
					if(querykey != null && querykey.toString().length > 0 && queryvalue != null && queryvalue.toString().length > 0 ){
						argStr+= querykey+'='+queryvalue+'&';
					}
					if(!hasTpParam){
						argStr+= 'tp='+tpvalue+'&';
					}
				}
			}
			return argStr.substring(0, argStr.length-1);
		}
	</script>
</body>

</html>